<script setup lang='ts'>
import { userCurrentUserInfo } from '@fl/api/iam-api'
import { ContentWrap } from '@fl/origin-components/ContentWrap'
import { ElDivider, ElSkeleton, ElTabPane, ElTabs } from 'element-plus'
import { ref } from 'vue'
import EditPassword from './components/EditPassword.vue'

const activeName = ref('first')
const isOrg = import.meta.env.VITE_IS_ORG === 'true'
const { data, isLoading } = userCurrentUserInfo()
</script>

<template>
    <div class="flex size-full">
        <ContentWrap title="个人信息"
                     class="w-400px"
        >
            <ElSkeleton v-if="isLoading"
                        animated
            />

            <template v-else>
                <div class="flex justify-between items-center">
                    <div>账号</div>

                    <div>{{ data!.code }}</div>
                </div>

                <ElDivider />

                <div class="flex justify-between items-center">
                    <div>昵称</div>

                    <div>{{ data!.name }}</div>
                </div>

                <ElDivider />

                <div class="flex justify-between items-center">
                    <div>手机号码</div>

                    <div>{{ data!.mobile ?? '-' }}</div>
                </div>

                <ElDivider />

                <div class="flex justify-between items-center">
                    <div>用户邮箱</div>

                    <div>{{ data!.email || '-' }}</div>
                </div>

                <ElDivider v-if="data.dept" />

                <div v-if="isOrg"
                     class="flex justify-between items-center"
                >
                    <div>角色</div>

                    <div>{{ data.role }}</div>
                </div>
            </template>
        </ContentWrap>

        <ContentWrap title="基本资料"
                     class="ml-20px flex-[3]"
        >
            <ElTabs v-model="activeName">
                <ElTabPane label="修改密码"
                           name="first"
                >
                    <EditPassword />
                </ElTabPane>
            </ElTabs>
        </ContentWrap>
    </div>
</template>

<style lang="less" scoped>
.avatar {
    position: relative;

    &::after {
        position: absolute;
        top: 0;
        left: 0;
        display: flex;
        width: 100%;
        height: 100%;
        font-size: 50px;
        color: #fff;
        background-color: rgb(0 0 0 / 40%);
        border-radius: 50%;
        content: '+';
        opacity: 0;
        justify-content: center;
        align-items: center;
    }

    &:hover {
        &::after {
            opacity: 1;
        }
    }
}
</style>
